<template>
        <div class="mainText main">
    <div class="pages clearfix">
        <div class="title">
            <p class="pageTitle">
                新建私海
            </p>
        </div>
        <div class="tableBtn">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index.html' }">拟办</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/customerResourceAllocateNBList' }">客户资源分配</el-breadcrumb-item>
            <el-breadcrumb-item>新建私海</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <ul class="from">
                <li data-url='/index.html'>拟办</li>
                <li>客户资源分配</li>
            </ul> -->
            <ul class="functionButton titleButton">
                <li class="submit">
                    <p>
                        <span>帮助</span>
                    </p>
                </li>
                <li >
                    <p>
                        <span>提交</span>
                    </p>
                </li>
                
                <li onclick="backBtnHander();">
                    <p>
                        <span>返回</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 新建私海表单 -->
    <!-- 基础信息表格 -->
    <el-form ref="form" :model="form" label-width="80px">
      <div class="incrementSea">
         <div class="payApprove_title">
             <span class="diffMid">基础信息</span>
         </div>
         <table class="defaltTable baseTable">
             <colgroup>
                 <col width="15%">
                 <col width="85%">
             </colgroup>
             <tbody>
                  <tr>
                     <td>私海名城</td>
                     <td>
                         <input type="text" class="defaultInput mustRequire">
                     </td>
                 </tr>
                 <tr>
                     <td>客户负责人</td>
                     <td class="text_l defaultSelect sysPostSelect" >
                        <span>请选择</span>
                     </td>
                 </tr>
                
                 
             </tbody>
         </table>
     </div>
    <!-- 私海客户表格 -->
     <div class="incrementSea">
         <div class="payApprove_title">
             <span class="diffMid">私海客户</span>
         </div>
         <table class="defaltTable baseTable">
             <colgroup>
                 <col width="40%">
                 <col width="40%">
             </colgroup>
             <tbody>
                 <el-transfer
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入搜索拼音"
                    :titles="['可选客户列表', '已选客户列表']"
                    v-model="value"
                    :data="data">
                </el-transfer>
                  <!-- <tr>
                     <td>私海名城</td>
                     <td>
                         <input type="text" class="defaultInput mustRequire">
                     </td>
                 </tr>
                 <tr>
                     <td>客户负责人</td>
                     <td class="text_l defaultSelect sysPostSelect" >
                        <span>请选择</span>
                     </td>
                 </tr> -->
                
                 
             </tbody>
         </table>
     </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {

    const generateData = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
      return {
        data: generateData(),
        value: [],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        }
      };
    
  },
  created () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
</style>
